<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--    <title>注册</title>-->
<!--    <link rel="stylesheet" href="css/common.css">-->
<!--    <link rel="stylesheet" href="css/login.css">-->
<!--</head>-->
<!--<body>-->
<!--    <div class="nav">-->
<!--        五子棋对战-->
<!--    </div>-->
<!--    <div class="login-container">-->
<!--        &lt;!&ndash; 登录界面的对话框 &ndash;&gt;-->
<!--        <div class="login-dialog">-->
<!--            &lt;!&ndash; 提示信息 &ndash;&gt;-->
<!--            <h3>用户注册</h3>-->
<!--            &lt;!&ndash; 这个表示一行 &ndash;&gt;-->
<!--            <div class="row">-->
<!--                <span>用户名</span>-->
<!--                <input type="text" id="username">-->
<!--            </div>-->
<!--            &lt;!&ndash; 这是另一行 &ndash;&gt;-->
<!--            <div class="row">-->
<!--                <span>密码</span>-->
<!--                <input type="password" id="password">-->
<!--            </div>-->
<!--            &lt;!&ndash; 提交按钮 &ndash;&gt;-->
<!--            <div class="row">-->
<!--                <button id="submit">提交</button>-->
<!--                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
<!--                <button id="back" onclick="toregister()">返回</button>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div> -->

<!--    <script src="js/jquery.min.js"></script>-->

<!--    <script type="text/javascript">-->
<!--        function toregister() {-->
<!--            window.location.href = "login.html";-->
<!--        }-->
<!--    </script>-->

<!--    <script>-->
<!--        let usernameInput = document.querySelector('#username');-->
<!--        let passwordInput = document.querySelector('#password');-->
<!--        let submitButton = document.querySelector('#submit');-->
<!--        submitButton.onclick = function() {-->
<!--            $.ajax({-->
<!--                type: 'post',-->
<!--                url: '/register',-->
<!--                data: {-->
<!--                    username: usernameInput.value,-->
<!--                    password: passwordInput.value,-->
<!--                },-->
<!--                success: function(body) {-->
<!--                    // 如果注册成功, 就会返回一个新注册好的用户对象. -->
<!--                    if (body && body.username) {-->
<!--                        // 注册成功!-->
<!--                        alert("注册成功!")-->
<!--                        location.assign('/login.html');-->
<!--                    } else {-->
<!--                        alert("注册失败!");-->
<!--                    }-->
<!--                }, -->
<!--                error: function() {-->
<!--                    alert("注册失败!");-->
<!--                }-->
<!--            });-->
<!--        }-->

<!--    </script>-->
<!--</body>-->
<!--</html>-->



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="nav">
    <img src="image/touxiang.png" alt="">
    <span>五子棋对战平台</span>
</div>

<!-- 版心 -->
<div class="login-container">
    <!-- 中间的登陆框 -->
    <div class="login-dialog">
        <h3>用户注册</h3>
        <div class="row">
            <span>用户名</span>
            <input type="text" id="username" placeholder="请输入用户名">
        </div>
        <div class="row">
            <span>密码</span>
            <input type="password" id="password" placeholder="请输入密码">
        </div>
        <div class="row">
            <span>确认密码</span>
            <input type="password" id="password2" placeholder="请确认密码">
        </div>
        <div class="submit-row2">
            <button id="submit">注册</button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" id="submit2" value="返回" onclick="toregister()">
        </div>
    </div>
</div>

<script src="./js/jquery.min.js"></script>

<script type="text/javascript">
    function toregister() {
        window.location.href = "login.html";
    }
</script>

<script>

    let submitButton = document.querySelector("#submit");

    submitButton.onclick = function () {
        let username = document.querySelector("#username");
        let password1 = document.querySelector("#password");
        let password2 = document.querySelector("#password2");
        if (username.value.trim() == "") {
            alert("请输入用户名!");
            username.focus();
            return;
        }
        if (password1.value.trim() == "") {
            alert('请输入密码!');
            password1.focus();
            return;
        }
        if (password2.value.trim() == "") {
            alert('请再次输入密码!');
            password2.focus();
            return;
        }
        if (password1.value.trim() != password2.value.trim()) {
            alert('两次输入的密码不同!');
            passwrod1.value = "";
            password2.value = "";
            return;
        }

        $.ajax({
            type: 'post',
            url: '/register',
            data: {
                username: username.value,
                password: password1.value,
            },
            success: function (body) {
                //请求执行成功之后的回调函数
                if (body && body.username) {
                    alert("注册成功!");
                    location.assign('/login.html');
                } else {
                    alert("注册失败!当前用户已经存在!")
                }
            },
            error: function () {
                //请求执行失败之后的回调函数
                alert("注册失败!")
            }
        });
    }
</script>

</body>
</html>